<template>
	<view>
		<u-search placeholder="请输入车牌号/出发地/到达地/项目/线路搜索" v-model="keyword" @search="handlerKeyword" @custom="handlerKeyword"></u-search>
		<view class="history">
			<view class="historyTitle clearFix">
				<p class="title">历史搜索</p>
				<u-icon name="trash" class="trash" size="35" @click="deleteHistory"></u-icon>
			</view>
			<view class="tags"><u-tag :text="item" :key="index" shape="circle" type="info" mode="light" v-for="item in historyList" /></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			historyList: [], // 存储输入的内容的历史记录容器
			keyword: '' // 文本框输入的内容
		};
	},
	mounted() {
		// 获取历史记录数据
		this.getHistoryList();
	},
	methods: {
		// 点击搜索按钮或者回车，保存搜索记录
		handlerKeyword(value) {
			if(value){
			// 将搜索框的内容存入到历史记录容器中
			this.historyList.unshift(value);
			// 缓存信息（把信息存储到内容中，是为了重新进入页面时，还能显示此数据）
			uni.setStorageSync('historyList', this.historyList);
			}
		},
		// 读取缓存中的历史记录数据
		getHistoryList() {
			const historyList = uni.getStorageSync('historyList');
			console.log(historyList);
			if (historyList) {
				this.historyList = historyList;
			}
		},
		// 点击垃圾桶按钮删除历史搜索
		deleteHistory(){
			  uni.showModal({
			    title: '删除提示',
			    content: '您确定要删除历史搜索记录吗？',
			    success: (res) => {
			      if (res.confirm) {
			        this.historyList = []
			        uni.removeStorageSync('historyList')
			      }
			    }
			  })
			}
	}
};
</script>

<style lang="less">
.clearFix:after {
	content: ' ';
	display: block;
	clear: both;
}
page {
	width: 100%;
	height: 100%;
	background-color: #f0eff4;
}
.u-search.data-v-1a326067 {
	padding: 20upx;
}
.u-content.data-v-1a326067 {
	height: 60upx !important;
	line-height: 60upx;
}
.u-input.data-v-1a326067 {
	font-size: 24upx !important;
	background-color: #ffffff;
}
.history {
	padding: 30upx;
	height: 1100upx;
	background-color: #ffffff;
	margin: 15upx;
	.historyTitle {
		display: block;
		.title {
			font-size: 30upx;
			color: #7f8096;
			margin-bottom: 20upx;
			float: left;
			line-height: 30upx;
			height: 30upx;
		}
		.trash {
			float: right;
			line-height: 30upx;
			height: 30upx;
		}
	}
	.tags {
		display: block;
	}
}
.u-shape-circle.data-v-1481d46d {
	margin-right: 10upx;
}
</style>
